<template>
    <div class="header df ai-c">
        <div class="fs-16 b title">{{siteName}}</div>
        <el-dropdown v-if="roles" @command="changeRole" class="c-ff">
            <span class="selspan c-ff df ai-c">
                {{roles[role].title}}
                <el-icon><CaretBottom /></el-icon>
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item v-for="(item,index) in roles" :key="index" :command="index">{{item.title}}</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
    data(){
        return {
            roles: null,
            role: 0,
            siteName: "",
            menu: [],
        }
    },
    created(){
        if(this.roleInfo){
            this.roles = this.roleInfo.roles;
            this.menu = this.roleInfo.menu;
            this.role = this.roleInfo.roleIndex;
            this.siteName = this.roleInfo.siteName;
        }
    },
    methods:{
        changeRole(index){
            this.role = index;
            sessionStorage.setItem('roleindex', index);
            this.menu = this.roles[this.role].menu;
            this.$store.commit("setRoleInfo",{
                roleIndex: this.role,
                menu: this.menu,
                iframe: this.roles[this.role].framework=='iframe',
            });
            this.$router.push({name:"index"});
        },
    },
    computed: {
        ...mapState(['roleInfo']),
    },
    watch: {
        roleInfo(){
            if(this.roleInfo){
                this.roles = this.roleInfo.roles;
                this.menu = this.roleInfo.menu;
                this.role = this.roleInfo.roleIndex;
                this.siteName = this.roleInfo.siteName;
            }
        }
    }
}
</script>

<style scoped>
.header{height:50px;}
.title{margin-right:50px; font-size:14px;}
.selspan{cursor:pointer;}
.arrow{width:0; height:0; display:block; margin-left:4px; transform:translatey(3px); border:6px solid transparent; border-top-color:#ffffff;}
</style>